<template>
  <div class="container">
    <view class="wrap">
      <view class="flex justifyBetween alignCenter fz14">
        <view class="shopNum">购物数量 {{cartCount}}</view>
        <view>管理</view>
      </view>

      <view class="list">
        <view class="box flex" v-for="(item, index) in list" :key="index">
          <view class="flex alignCenter">
            <view class="check" @click="item.check = !item.check">
              <view class="ye" v-if="item.check">
                <uv-icon size="20" name="checkmark-circle-fill" color="#E93323"></uv-icon>
              </view>
              <view class="no" v-else></view>
            </view>
            <view class="image shrink">
              <image :src="item.image" mode="aspectFill" />
            </view>
          </view>

          <view class="right">
            <view class="storeName fz14">{{item.storeName}}</view>
            <view class="price fz14 flex justifyBetween">¥{{item.price}}
              <numberBox v-model="item.cartNum" @plus="editCartNum(item)" @minus="editCartNum(item)"></numberBox>
            </view>
          </view>
        </view>
      </view>
    </view>

    <view class="actionBtn flex justifyBetween alignCenter">
      <view class="flex  alignCenter">
        <view class="check fz14" @click="allChecked = !allChecked">
          <view class="ye" v-if="allChecked">
            <uv-icon size="20" name="checkmark-circle-fill" color="#E93323"></uv-icon>
          </view>
          <view class="no" v-else></view>
        </view>
        全选
      </view>

      <view class="flex alignCenter">
        <view class="price fz16 bold">¥2400</view>
        <uv-button text="立即下单" shape="circle" color="#E93323"></uv-button>
      </view>
    </view>
  </div>
</template>

<script setup lang="ts">
import numberBox from "@/components/uv/numberBox.vue";
import { nextTick } from "../../uni_modules/zebra-swiper/shared/utils";
const { proxy } = getCurrentInstance();
const instance = getCurrentInstance();

let cartCount = ref(0);
let allChecked = ref(false);
let params = {
  page: 1,
  limit: 20,
  isValid: true,
};
let totalPage = 0;
let list = ref([]);
let toEdit = ref(false);

onShow(() => {
  getCartCount();
  getInfo();
});

async function getCartCount() {
  let { count } = await proxy.$shopApis.cartCount({
    numType: true,
    type: "sum",
  });
  cartCount.value = count;
  console.log("购物车数量", count);
}

function editCartNum(item) {
  nextTick(async () => {
    await proxy.$shopApis.cartNum({
      id: item.id,
      number: item.cartNum,
    });
    getInfo();
    getCartCount();
  });
}

async function getInfo() {
  let resp = await proxy.$shopApis.cartList(params);
  let arr = [...list.value];
  if (resp.list) {
    arr = proxy.$utils.filterArr(arr, resp.list, "id");
  }
  list.value = arr;
  totalPage = resp.totalPage;
  console.log("购物车列表", resp);
}
</script>


<style lang="scss">
page {
  background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
.container {
  padding: 15px;
  .wrap {
    border-radius: 10px;
    padding: 10px;
    background-color: white;
  }
  .no {
    width: 18px;
    height: 18px;
    border: 1px solid #d4d4d4;
    border-radius: 50%;
    margin-right: 10px;
  }
  .ye {
    margin-right: 10px;
  }
  .list {
    .box {
      margin-top: 15px;
      .image {
        width: 65px;
        height: 65px;
        image {
          width: 100%;
          display: block;
          height: 100%;
          border-radius: 10px;
        }
      }
      .right {
        margin-left: 15px;
        .price {
          color: #e93323;
          margin-top: 5px;
        }
        .storeName {
          overflow: hidden;
          text-overflow: ellipsis;
          width: 100%;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          word-break: break-all;
        }
      }
    }
  }
  .actionBtn {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    padding: 15px 15px 25px 15px;
    .price {
      color: #e93323;
      margin-right: 10px;
    }
  }
}
</style>
